<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <!-- 头部面包屑 -->
        <el-breadcrumb v-if="$route.query.id" separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
      <!-- 左边列 -->
      <div class="header">
        <div>
          <el-form ref="elForm" :model="pageInfo" :inline="true" label-width="100px">
            <el-form-item label="目录名称" prop="directoryName">
              <el-input v-model.trim="pageInfo.directoryName" placeholder="请输入" :style="{ width: '100%' }" />
            </el-form-item>

            <el-form-item label="状态" prop="state">
              <el-select v-model="pageInfo.state" placeholder="请选择" :style="{ width: '90%' }">
                <el-option label="已启用" :value="1" />
                <el-option label="已禁用" :value="0" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button @click="resetForm">清除</el-button>
              <el-button type="primary" @click="getDirectorysList">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 右边列 -->
        <div>
          <el-button v-if="$route.query.id" type="text" @click="$router.push('/subjects/list')">
            <i class="el-icon-view el-icon-back" />
            返回学科
          </el-button>
          <el-button type="success" @click="operationDirectorys('add')">新建目录</el-button>
        </div>
      </div>

      <div class="info">
        <i class="el-icon-info" />
        数据一共 {{ totalDirectorys }} 条
      </div>
      <!-- 数据表格 -->
      <el-table :data="directorysList" style="width: 100%">
        <el-table-column type="index" label="序号" width="180" />
        <el-table-column prop="subjectName" label="所属学科" width="180" />
        <el-table-column prop="directoryName" label="目录名称" />
        <el-table-column prop="username" label="创建者" />
        <el-table-column label="创建日期">
          <template v-slot="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量" />
        <el-table-column label="创建日期">
          <template v-slot="{ row }">
            {{ row.state === 1 ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="text" @click="editState(row.id, row.state)">
              {{ row.state === 1 ? '禁用' : '启用' }}
            </el-button>
            <el-button type="text" :disabled="row.state === 1" @click="operationDirectorys('edit', row.id)">修改</el-button>
            <el-button type="text" :disabled="row.state === 1" @click="removeDirectorys(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 底部分页 -->
      <el-row type="flex" align="center" justify="end">
        <el-pagination
          :current-page="pageInfo.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalDirectorys"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>

      <!-- 操作弹层 -->
      <directorysAdd ref="addDirectorys" :operation="operation" :directorys-dialog.sync="directorysDialog" :subject-simple-list="subjectSimpleList" :directorys-list="directorysList" />
    </el-card>
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/directorys.js'
import directorysAdd from '../components/directorys-add.vue'
import { simple } from '@/api/hmmm/subjects.js'
import { cleanNullValue } from '@/filters/index.js'
export default {
  name: 'Directorys',
  components: { directorysAdd },
  data() {
    return {
      // 学科简单列表
      subjectSimpleList: [],
      // 目录数组
      directorysList: [],
      // 总条数
      totalDirectorys: 0,
      // 页面信息对象
      pageInfo: {
        page: 1,
        pagesize: 10,
        subjectID: '',
        directoryName: '',
        state: ''
      },
      // 操作类型
      operation: '',
      // 弹层控制器
      directorysDialog: false
      // 从那个学科来
    }
  },
  created() {
    this.getDirectorysList()
    this.getSimpleSubjects()
  },
  updated() {
    if (!this.$route.query.id) {
      this.getDirectorysList()
    }
  },
  methods: {
    // 获取学科简单列表
    async getSimpleSubjects() {
      const { data } = await simple()
      this.subjectSimpleList = data
    },
    // 获取目录列表
    async getDirectorysList() {
      if (this.$route.query.id) {
        // 保存学科id
        this.pageInfo.subjectID = parseInt(this.$route.query.id)
      }
      const {
        data: { items, counts, page }
      } = await list(cleanNullValue(this.pageInfo))
      this.directorysList = items
      this.totalDirectorys = counts
      this.pageInfo.page = parseInt(page)
    },
    // 页面大小改变时
    handleSizeChange(size) {
      this.pageInfo.pagesize = size
      this.getDirectorysList()
    },
    // 页码改变时
    handleCurrentChange(number) {
      this.pageInfo.page = number
      this.getDirectorysList()
    },
    // 新增/编辑目录
    operationDirectorys(type, id) {
      this.directorysDialog = true
      this.operation = type
      if (type === 'edit') {
        this.$refs.addDirectorys.echoData(id)
      }
    },
    // 删除目录
    async removeDirectorys(id) {
      try {
        await this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove({ id })
        this.$message.success('删除成功')
        this.getDirectorysList()
      } catch (error) {
        if (error === 'cancel') return
      }
    },
    // 修改状态
    async editState(id, state) {
      try {
        await changeState({ id, state: state === 1 ? 0 : 1 })
        this.$message.success('修改成功')
        this.getDirectorysList()
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 重置输入框
    resetForm() {
      this.$refs['elForm'].resetFields()
    }
  }
}
</script>

<style scoped lang='less'>
.app-container {
  padding: 10px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: top;
}

.info {
  background-color: #f4f4f5;
  color: #909399;
  margin-bottom: 15px;
  width: 100%;
  padding: 8px 16px;
}
</style>
